<!--
- Author:  LiShibin.
- Date:    2018/9/17.
- File:    bankCard.
-->
<template>

  <div class="Web_Box1" style="margin-bottom:0;">
    <div class="Topmenu"><i class="iconfont icon-youjiantou" @click="back"><a href=""></a></i>
      <h1>回收</h1>
      <span></span>
    </div>
    <div class="maintenance">
      <ul>
        <li @click="gotoClass">品牌<i class="iconfont icon-youjiantou-copy"></i><span class="maintenance_span">{{brand || '无'}}</span></li>
        <li>型号或系列<input type="text" placeholder="请输入型号或系列" style="height: 1.75rem;" v-model="wModel"></li>
        <li @click="openWindow">成色<i class="iconfont icon-youjiantou-copy"></i><span class="maintenance_span">{{qualityC || '无'}}</span></li>
        <li @click="switchBotton(0, 2)">是否有附件
          <i class="iconfont icon-kaiguan-copy" v-if="maintaintype == 2"></i>
          <i class="iconfont icon-kaiguan" v-else></i>
        </li>
        <li @click="switchBotton(1, 2)">是否有包装
          <i class="iconfont icon-kaiguan-copy" v-if="renewType == 2"></i>
          <i class="iconfont icon-kaiguan" v-else></i></li>
        <li> 购买价格<input type="text" placeholder="提供有利于高价回收哦" style="height: 1.75rem;" v-model="price"></li>
        <li> 期望价格<input type="text" placeholder="说出您的心理预售价格" style="height: 1.75rem;" v-model="planPrice"></li>
        <li> 微信<input type="text" placeholder="请输入您的微信" style="height: 1.75rem;" v-model="QQ"></li>
        <li>手机号<input type="text" placeholder="请输入您的11位手机号" style="height: 1.75rem;" v-model="mobile"></li>
        <li> 姓名<input type="text" placeholder="请输入您的真实姓名" style="height: 1.75rem;" v-model="name"></li>
      </ul>
      <div class="maintenance_upload">
        <ul>
          <li style="margin-right: 5%;width: 20%;height: 5rem;background: initial" alt="" v-for="(image , i) in images.face" v-show="images.face!=''"><img style="width:100%" :src="image.src" alt=""></li>
          <li style="margin-right: 5%;width: 20%;height: 5rem;background: initial" alt="" v-for="(image , i) in images.backs" v-show="images.backs!=''"><img style="width:100%;" :src="image.src" alt=""></li>
          <li style="margin-right: 5%;width: 20%;height: 5rem;background: initial" alt="" v-for="(image , i) in images.side" v-show="images.side!=''"><img style="width:100%;" :src="image.src" alt=""></li>
          <li style="margin-right: 5%;width: 20%;height: 5rem;background: initial" alt="" v-for="(image , i) in images.gangmaster" v-show="images.gangmaster!=''"><img style="width:100%;" :src="image.src" alt=""></li>
          <li style="margin-right: 5%;width: 20%;height: 3rem" v-show="images.gangmaster==''">
            <image-upload
              class="but_1 wauto"
              ref='ImageUpload'
              :url='url'
              :touch-size = 1
              :multiple = false
              :lrz-options = {width:1024}
              field-name = 'serverImgFile'
              :data = {}
              :max-count = 1
              @chooseImages='bindtap_chooseImages'
              style="tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:rgba(0,0,0,0);opacity: 0; z-index: 999;height: 3.5rem"/>
          </li>
        </ul>
        <p>
          <span class="chuantishili">传图示例</span>
        </p>
        <ul class="maintenance_upload_two">
          <li><img src="../../assets/images/shili_1.png" alt=""></li>
          <li><img src="../../assets/images/shili_2.png" alt=""></li>
          <li><img src="../../assets/images/shili_3.png" alt=""></li>
          <li><img src="../../assets/images//shili_4.png" alt=""></li>
        </ul>
      </div>
      <p class="maintenance_upload_p">
        注：请上传多个角度的宝贝照片
        <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上传证书照片更好回收哦！
      </p>
      <p style="margin-left: 3px">备注：</p>
      <div class="maintenance_srk">
        <textarea cols="" rows="" v-model="description">更多故障描述</textarea>
      </div>
      <!--<p class="maintenance_upload_p">-->
        <!--注：<br> 请上传手表正面、背面、侧面、把头的对应照片，提交信息后工作人 员将在12小时内提供维保信息-->
        <!--<br> 请注意接听官方客服电话：4008881855-->
      <!--</p>-->
      <div class="maintenance_upload_btn mt120" @click="summitData" v-show="sign == 0">马上获得报价</div>
      <div class="maintenance_upload_btn mt120" v-show="sign != 0">马上获得报价</div>
      <div class="maintenance_bg" v-show="window == true">
        <div class="maintenance_tc">
          <p class="maintenance_tc_1">选择成色<i class="iconfont icon-guanbi" @click="openWindow"></i></p>
          <div class="maintenance_tc_2">
            <ul>
              <li v-for="(item, i) in quality" @click="chooseQuality(item, i)">
                <i class="iconfont icon-xuanzhong1" style="float: left;" :class="{'on': sign1 == i}"></i>
                <p class="maintenance_tc_2_p1">【{{item.title}}】</p>
                <p class="maintenance_tc_2_p2">{{item.detail}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import {ImageUpload, ImagePreview} from 'vue-image-upload-preview'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: 'memberInfo'})
    ],
    data() {
      return {
        images: {face: [], backs: [], side: [], gangmaster: []},  // 图片数据
        imagesBase64: {face: [], backs: [], side: [], gangmaster: []},  // 64位图片数据
        advice: '',
        index: -1,
        connect: '',
        url: '',
        maintaintype: 2,  // 是否有附件
        renewType: 2, // 是否有包装
        brand: '',  // 品牌
        brandData: this.$route.params || '',
        fault: '',  // 故障描述
        wModel: '', // 型号
        name: '', // 用户名
        mobile: '',  // 手机号
        description: '填写我们方便联系您的时间以及其他备注哦~',
        sign: 0,
        window: false,
        quality: [{title: '99新', detail: '未曾使用过', color: ''}, {title: '95新-98新', detail: '未使用过，因陈列，存放产生的细小痕迹等', color: ''},
          {title: '91新-95新', detail: '轻微使用痕迹，外观无重大改变，状态良好', color: ''}, {title: '85新-9成新', detail: '明显使用痕迹，外观发生磨损、划痕等', color: ''},
          {title: '8成新-85新', detail: '使用痕迹严重，外观发生严重磨损、划痕等', color: ''}],
        qualityC: '',
        sign1: 0,
        price: '',
        planPrice: '',
        QQ: '',
        showHint: false
      }
    },
    components: {
      'image-preview': ImagePreview,
      'image-upload': ImageUpload
    },
    created() {
      console.log(this.brandData)
      if (this.brandData.brand_name) {
        this.brand = this.brandData.brand_name || ''
      }
    },
    computed: {
      preImages() {
        return this.images.map(v => { return v.src })
      }
    },
    watch: {
      mobile: function () {
        if (this.mobile == this.memberInfo.member_mobile) {
          this.name = this.memberInfo.member_name
        }
        if (this.name && this.mobile && this.QQ) {
          this.showHint = true
        } else {
          this.showHint = false
        }
      },
      name: function () {
        if (this.name && this.mobile && this.QQ) {
          this.showHint = true
        } else {
          this.showHint = false
        }
      },
      QQ: function () {
        if (this.name && this.mobile && this.QQ) {
          this.showHint = true
        } else {
          this.showHint = false
        }
      }
    },
    methods: {
      chooseQuality(item, i) {
        this.qualityC = item.title
        this.sign1 = i
        this.window = !this.window
      },
      openWindow() {
        this.window = !this.window
      },
      summitData() {
        this.imagesBase64.face = this.images.face.map(v => { return v.src })
        this.imagesBase64.backs = this.images.backs.map(v => { return v.src })
        this.imagesBase64.side = this.images.side.map(v => { return v.src })
        this.imagesBase64.gangmaster = this.images.gangmaster.map(v => { return v.src })
        // if (!this.brandData.brand_id) {
        //   this.$toast('请选择品牌')
        //   return
        // }
        // if (!this.wModel) {
        //   this.$toast('请填写型号')
        //   return
        // }
        // if (!this.qualityC) {
        //   this.$toast('请选择成色')
        //   return
        // }
        // if (!this.price) {
        //   this.$toast('请输入购买价格')
        //   return
        // }
        // if (!this.planPrice) {
        //   this.$toast('请输入期望价格')
        //   return
        // }
        if (!this.QQ) {
          this.$toast('请输入微信号')
          return
        }
        if (!this.name) {
          this.$toast('请填写名字')
          return
        }
        if (!this.$validator.phone(this.mobile)) {
          this.$toast('请填写正确的手机号')
          return
        }
        if (this.imagesBase64.face == '' || this.imagesBase64.backs == '' || this.imagesBase64.backs == '' || this.imagesBase64.gangmaster == '') {
          this.$toast('图上传正面、反面、侧面、表头的所有图片')
          return
        }
        this.$indicator.open('提交中...')
        this.sign = 1
        this.$request.Watch_recycle(this.brandData.brand_id, this.wModel, this.qualityC, this.maintaintype, this.renewType, this.price, this.planPrice, this.QQ, this.name, this.mobile, this.imagesBase64.face, this.imagesBase64.backs, this.imagesBase64.side, this.imagesBase64.gangmaster, this.description).then(data => {
          this.$toast('提交成功！')
          this.$router.replace({name: 'default'})
          // setTimeout(() => {
          //   this.$router.go(-1)
          // }, 2000)
          this.sign = 0
          this.$indicator.close()
        }).catch(e => {
          this.$toast('失败：' + e.msg)
          this.sign = 0
          this.$indicator.close()
        })
      },
      gotoClass() {
        this.$router.push({name: 'watch-class', params: {from: 'recycling'}})
      },
      switchBotton(key, type) {
        if (key == 0) {
          if (this.maintaintype == 1) {
            this.maintaintype = type
          } else {
            this.maintaintype = this.maintaintype - 1
          }
          // console.log(this.type)
        } else if (key == 1) {
          if (this.renewType == 1) {
            this.renewType = type
          } else {
            this.renewType = this.renewType - 1
          }
        }
      },
      back() {
        this.$router.push({name: 'home'})
      },
      updateName() {
        var advice = this.advice
        if (!advice) {
          this.$toast('请输入您的意见或建议！')
          return
        }
        this.$request.submitAdvice(advice, this.connect).then(data => {
          this.$toast('感谢您的反馈！')
          setTimeout(() => {
            this.$router.go(-1)
          }, 2000)
        })
      },
      bindtap_chooseImages(e) {
        /*
         * 选择成功 e是一个数组
         * e[0].file 图片文件对象，用于上传
         * e[0].src 图片base64，用于预览
         * e[0].compress 图片是否经过压缩
         */
        this.bindtap_delete()
        if (Array.isArray(e)) {
          if (this.images.face == '') {
            this.images.face = this.images.face.concat(e)
            console.log(this.images.face.map(v => { return v.src }))
            console.log('face')
          } else if (this.images.backs == '') {
            this.images.backs = this.images.backs.concat(e)
            console.log(this.images.backs.map(v => { return v.src }))
            console.log('back')
          } else if (this.images.side == '') {
            this.images.side = this.images.side.concat(e)
            console.log(this.images.side.map(v => { return v.src }))
            console.log('side')
          } else {
            this.images.gangmaster = this.images.gangmaster.concat(e)
            console.log(this.images.gangmaster.map(v => { return v.src }))
            console.log('gangmaster')
          }
        } else {
          console.log(e)
        }
      },
      bindtap_delete(e) {
        /*
         * e 当前显示的图片的下标(双向绑定index，可以忽略e)
         * this.images 存储选择图片传过来的对象
         * this.index 双向绑定当前显示的图片的下标
         * 下面是删除的例子
         */
        this.images.face = this.images.face.filter((v, i) => {
          return this.index != i
        })
      },
      /**
       *  绑定函数 -- 预览图片
       */
      bingtap_preview(i) {
        this.index = i
      },
      /**
       *  绑定函数 -- 取消预览
       */
      bingtap_hiddenImg() {
        this.index = -1
      },
      bindtap_upload() {
        if (!this.connect) {
          this.$toast('请填写联系方式')
          return
        }
        if (!this.advice) {
          this.$toast('请填写反馈')
          return
        }
        if (this.images.length == 0) {
          this.$messageBox.confirm(`你确定提交这个意见吗?`).then(action => {
            this.updateName()
            // setTimeout(() => {
            //   this.$router.go(-1)
            // }, 2000)
          }).catch(() => {
          })
          return
        }
        this.url = this.$config.website + '/mobile/index.php?act=goods_add&op=feedback&feedback=' + this.advice + '&connect=' + this.connect + '&member_id=' + this.memberInfo.member_id
        this.$messageBox.confirm(`你确定提交这个意见吗?`).then(action => {
          this.$refs.ImageUpload.uploadImages(this.images).then(res => {
            console.log(res)
            this.$toast('感谢您的反馈')
            setTimeout(() => {
              this.$router.go(-1)
            }, 2000)
          }).catch(err => {
            console.log(err)
            this.$toast('反馈提交失败，可能是因为图片过大')
            setTimeout(() => {
              this.$router.go(-1)
            }, 2000)
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style>
  .btn-commit{background-color: #e3c143;border-radius: 25px;height: 1.75rem;line-height: 1.75rem;}
  textarea::-webkit-input-placeholder{
    color:#999;
  }
  .maintenance_upload ul li input {
    width: 100%;
    height: 3rem;
  }
  .activeon {
    color: #fff !important;
    background: rgba(227, 193, 67, 1) !important;
  }
  .on {
    color: #f5d607 !important;
  }
</style>
